<!DOCTYPE html>
<!-- Wire, Copyright (C) 2018 Wire Swiss GmbH -->
<!-- {{config.CURRENT_VERSION_ID}} -->
<html id="wire-main-app">
  <head>
    <title>Wire</title>
    #include('../../page/template/#dest/style.htm')

    <style>

      body {
        overflow-x: hidden;
        overflow-y: scroll !important;
        background-color: rgba(0,0,0,.08);
        padding: 48px;
      }

      /* microbar */
      .microbar {
        position: fixed;
        width: 100%;
        height: 36px;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        z-index: 10000;
        -webkit-transition: all .35s;
                transition: all .35s;
      }

      .microbar-hidden {
        -webkit-transform: translateY(-32px);
                transform: translateY(-32px);
      }

      .microbar > li {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 11px;
          color: #fff;
          height: 32px;
          text-transform: uppercase;
          cursor: pointer;
      }


      /* user avatars */
      .user-avatars {
        text-transform: uppercase;
        font-size: 11px;
      }
      td {
        width: 240px;
        height: 240px;
        text-align: center;
      }
      participant-avatar img {
        content: url('');
      }

      /* grid */
      .col-12,
      .col-6 {
        outline: 1px solid red;
      }

      /* popovers */
      .popover {
        position: relative;
      }

      /* modal */
      .modal-wrapper {
        position: relative;
        width: 400px;
        height: 400px;
      }

      .modal-wrapper .modal {
       position: absolute;
      }

      /* list */
      .box-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: inline-block;
      }
      .box-list > li {
        color: #fff;
        text-transform: uppercase;
        float: left;
        height: 64px;
        min-width: 96px;
        font-size: 11px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box-list-dark {
        background: #222;
      }
    </style>
  </head>

  <body class="theme-blue main-accent-color-1">
  #include('microbar.htm')
  <h1>Colors</h1>
  #include('colors.htm')
  <h1>Buttons</h1>
  #include('buttons.htm')
  <h1>Media Controls</h1>
  #include('media-controls.htm')
  <h1>Checkbox</h1>
  #include('checkbox.htm')
  <h1>Popover</h1>
  #include('popovers.htm')
  <h1>Avatars</h1>
  #include('avatars.htm')
  <h1>Dots</h1>
  #include('dots.htm')

  #include('../../page/template/#dest/vendor.htm')
  #include('../../page/template/#dest/component.htm')

  <script>
    $(() => {
      // microbar
      $('.microbar > li').click(event => {
        const item = $(event.currentTarget);
        $('body')
          .removeClass()
          .addClass('theme-' + item.text())
          .addClass('main-accent-color-' + (item.index('li') + 1));
      });

      let previousScroll = 0;
      $(window).scroll(() => {
         const scroll = $(window).scrollTop();
         $('.microbar').toggleClass('microbar-hidden', scroll > previousScroll);
         previousScroll = scroll;
      });

      // user avatars animation
      $('.avatar-image-loaded').click(function() {
        const avatar = $(this).removeClass('avatar-loading-transition avatar-image-loaded');
        window.setTimeout(() => avatar.addClass('avatar-loading-transition avatar-image-loaded'), 200);
      });

      // popovers
      $('#popovers .button-round').each(function(element) {
        new zeta.webapp.module.Bubble({
          host_selector: "#" + ($(this).attr('id')),
          scroll_selector: window,
          enable_click: true,
        });
      });
    });
  </script>
  </body>
</html>
